<template>
	<!-- 最外层的容器 -->
	<view class="my-settle-container">
	    <!-- 全选区域 -->
		<label class="radio" @click="changeAllState">
			<radio color="#C00000" :checked="isFullCheck"></radio>
			<text>全选</text>
		</label>
		
		<!-- 合计区域 -->
		<view class="amount-box">
			合计：
			<text class="amount">￥{{totalPrice}}</text>
		</view>
		
		<!-- 结算区域 -->
		<view class="btn-settle" @click="settlement">结算({{checkedGoodsAmount}})</view>
	</view>
</template>

<script>
	import {mapGetters, mapMutations, mapState} from 'vuex'
	export default {
		name:"my-settle",
		data() {
			return {
				// 倒计时
				seconds: 3,
				timerId: null
			};
		},
		computed: {
			...mapGetters('m_cart', ['isFullCheck', 'totalPrice', 'checkedGoodsAmount']),
			// 从user模块获取收货地址
			...mapGetters('m_user', ['addstr']),
			// 从user模块获取登陆成功的token
			...mapState('m_user', ['token']),
			// 从cart模块里 获取cart数组
			...mapState('m_cart', ['cart'])
		},
		updated() {
			// if (this.seconds === 0) {
			// 	console.log(this.seconds)
			// 	clearInterval(this.timerId)
			// }
		},
		methods: {
			...mapMutations('m_cart', ['updateAllGoodsState']),
			...mapMutations('m_user', ['updateRedirectInfo']),
			changeAllState() {
				// console.log(this.isFullCheck)
				this.updateAllGoodsState(!this.isFullCheck)
			},
			// 结算条件
			settlement() {
				// 是否选择商品
				if(this.checkedGoodsAmount === 0) return uni.$showMsg('请选择要结算的商品')
				
				// 是否选择收货地址
				if(!this.addstr) return uni.$showMsg('请选择收货地址')
				
				// 用户登录
				// if(!this.token) return uni.$showMsg('请先登录')
				if(!this.token) {
					// return this.delayNavigate()
					return this.delayNavigate()
				}
				// 实现微信支付功能
				this.payOrder()
				
			},
			
			// 倒计时
			delayNavigate() {
				for(let i = 0; i <= this.seconds; i++) {
					setTimeout(() => {
						if(i === this.seconds) {
							console.log('跳转')
							uni.switchTab({
								url: '/pages/my/my',
								success: () => {
									
									this.updateRedirectInfo({
										openType: 'switchTab',
										// 从哪个页面跳转过去的
										from: '/pages/cart/cart'
									})
								}
							})
						} else {
							console.log('倒计时', this.seconds - i)
							uni.showToast({
								title: `未登录，将在${this.seconds - i}秒后跳转到登录页`,
								duration: 1000,
								mask: true,
								icon: 'none'
							})
						}
					}, i*1000)
				}
			},
			// 微信支付
			async payOrder() {
				const orderInfo = {
					order_price: 0.01,
					consignee_addr: this.addstr,
					goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }
					        ))
				}
				const {data: res} = await uni.$http.post('/my/orders/create', orderInfo)
				if(res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
				const orderNumber = res.message.order_number
				const {data: res2} = await uni.$http.post('/my/orders/req_unifiedorder', { order_number: orderNumber })
				if(res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')
				const payInfo = res2.message.pay
				const [err, succ] = await uni.requestPayment(payInfo)
				if (err) return uni.$showMsg('订单未支付！')
				const { data: res3 } = await uni.$http.post('/my/orders/chkOrder', { order_number: orderNumber })
				if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
				uni.showToast({
				     title: '支付完成！',
				     icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss">
.my-settle-container {
  /* 底部固定定位 */
  position: fixed;
  bottom: 0;
  left: 0;
  /* 设置宽高和背景色 */
  width: 100%;
  height: 50px;
  background-color: white; // 将背景色从 cyan 改为 white
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount-box {
    .amount {
      color: #c00000;
    }
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>